<template>
    <div>
        <el-breadcrumb separator="/" class="registration-list">
		  <el-breadcrumb-item class='home-list' :to="{ path: '/' }">活动列表</el-breadcrumb-item>
		  <el-breadcrumb-item>点赞量统计</el-breadcrumb-item>
		</el-breadcrumb>
        <div class="list-title" v-if='action!=null'>
			<div class="item">
				<el-row>
					<el-col :span="9">
						<div class="bg-purple base-topic title-activity">
						{{title}}
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple-light base-topic">
						{{action.type == 1 ? '会员活动' : '普通活动'}}
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple base-topic">
						创建日期：{{action.createDate}}
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="item">
				<el-row>
					<el-col :span="6">
						<i class="iconfont">&#xe624;</i>
						{{action.startDate}} ~ {{action.endDate}}
						
					</el-col>
					<el-col :span="16">
						<i class="iconfont icon-dizhi"></i>
                        {{action.place}} 
					</el-col>
				</el-row>
			</div>
			<div class="item">
				<el-row>
					<el-col :span="10">
						报名时间：{{action.enrollStart}} ~ {{action.enrollEnd}}
						
					</el-col>
					<el-col :span="6">
						发布方：{{action.buildName}}-{{action.poiName}}
					</el-col>
				</el-row>
			</div>
		</div>

		<div class="list-title" v-if='action!=null'>
			<el-button  
			v-for='item in btn_list' 
			:type="item.flag==true?'primary':''" 
			:key='item.value'
			@click='handleClick(item)'>{{item.name}}</el-button>

			<el-date-picker
				@change='handleChangeDate1'
				type="date"
				v-model="date1"
				placeholder="选择开始日期">
			</el-date-picker>
			<span>至</span>
			<el-date-picker
				v-model="date2"
				@change='handleChangeDate2'
				type="date"
				placeholder="选择结束日期">
			</el-date-picker>
			<el-button type="primary" @click='handleGetReadList'>确定</el-button>
			<a :href="root_url+'/marketweb/actionback/excel_good?keyAdmin='+$store.state.keyAdmin+'&actionId='+actionId+'&type='+newType+'&startDate='+date1+'&endDate='+date2">
				<el-button type="primary">导出</el-button>
			</a>
		</div>
		<div class="content">
			<div class="content-left">
				<el-row class="item-row" >
					<el-col :span="16">
						<div class="grid-content bg-purple base-topic title-activity">
						日期
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple base-topic title-activity">
						点赞量
						</div>
					</el-col>
				</el-row>
				<el-row class="item-row">
					<el-col :span="16">
						<div class="grid-content bg-purple base-topic title-activity">
						总计
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple base-topic title-activity">
						{{good_total}}
						</div>
					</el-col>
				</el-row>
				<el-row 
				v-for="(item,index) in list" 
				:key='item.index'
				:class="btn_index!=index?'item-row gray':'item-row white'" 
				@click.native='handleClickLeft(index,item)'>
					<el-col :span="16">
						<div class="grid-content bg-purple base-topic title-activity">
						{{item.createdate}}
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple base-topic title-activity">
						{{item.dzl}}
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="content-right">

                    <el-table
                    :data="good_list"
                    style="width: 100%">
                    <el-table-column
                        label="序号"
                        width="140">
                        <template scope="scope">
                            {{ scope.$index +1 }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="openid"
                        >
                        <template scope="scope">
                            {{scope.row.openid}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="点赞时间"
                        width="240">
                        <template scope="scope">
                            {{scope.row.createDate}}
                        </template>
                    </el-table-column>
                    </el-table>
						
				<div class="block">
					<el-pagination
						class="page-pagination"
						:current-page="currentPage"
						:page-size="pageSize"
						@current-change="handleCurrentChange"
						layout="total, prev, pager, next"
						:total="count">
					</el-pagination>
				</div>
			</div>
		</div>
       
      
    </div>
</template>

<script>
export default {
    data(){
        return {
            title:'',
			count:0,
			type:1,
			root_url:process.env.API_ROOT_URL,
			good_total:0,
			good_list:[],
			btn_list:[{
				name:'7天',
				value:'0',
				flag:true
			},{
				name:'15天',
				value:'1',
				flag:false
			},{
				name:'30天',
				value:'2',
				flag:false
			}],
			time_value:'',
			action:null,
			date1:'',
			date2:'',
			btn_index:0,
			type:'0',
			list:[],
			tab:'fwl',
            currentPage:1,
			loading:true,
            pageSize:10,
            readlist:[]
        }
    },

    methods:{
		handleChangeDate1(val){
			this.date1 = val
		},

		handleChangeDate2(val){
			this.date2 = val
		},
		
		handleClickLeft(index,item){
			this.btn_index = index;
			this.$http.post('marketweb/actionback/queryGoodDeailByActionId',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.actionId,
					tab:this.tab,
					createdate:item.createdate,
					pageNum:this.currentPage,
					pageSize:this.pageSize
				}).then(response=>{
					if(response.body.code == 200){
						this.good_list = response.body.list
						this.count = response.body.count
					}else{
						this.$message.error(response.body.msg)
					}
				},response=>{
					this.$message.error('获取阅读量信息失败')
				})
		},

        handleGetReadList(){
			this.good_total = 0;
            this.$http.post('marketweb/actionback/queryGoodByActionId',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.actionId,
					startDate:this.date1,
					endDate:this.date2,
					type:this.newType
				}).then(response=>{
					if(response.body.code == 200){
						this.list = response.body.list;
						for (let i = 0; i < this.list.length; i++) {
							this.good_total += this.list[i].dzl	
						}
						if(this.list.length){
							this.handleClickLeft(0,this.list[0])
						}else{
							this.good_list = []
						}	
					}else{
						this.$message.error(response.body.msg)
					}
				},response=>{
					this.$message.error('获取阅读量信息失败')
				})
		},

		handleClick(item){
			for(let i=0;i<this.btn_list.length;i++){
				this.btn_list[i].flag = false
			}
			item.flag = true;
			this.type = item.value
			this.date1='',
			this.date2=''
		},
		
		getActivityInfo(){
			 this.$http.post('marketweb/actionback/selectById',{
                keyAdmin:this.$store.state.keyAdmin,
                id:this.actionId
            }).then(response=>{
				if(response.body.code==200){
					this.action = response.body.action;
				}else{
					this.$message.error(response.body.msg)
				}
			},response=>{

			})
		},

        handleCurrentChange(val){
            this.currentPage = val;
            window.sessionStorage.currentPage = this.currentPage,
           	this.handleClickLeft(this.btn_index,this.list[this.btn_index])
        },
    },

	computed:{
		newType(){
			if(this.date1==''||this.date2==''){
				this.type = this.type
			}else{
				this.type = 3
			}
			return this.type
		}
	},

    created(){
        this.title = this.$route.query.title;
        this.actionId = this.$route.params.id;
		this.getActivityInfo()
		this.handleGetReadList()
    }
}
</script>
<style scoped>
    .registration-list{
		padding:10px 0;
		margin-bottom:10px;
		border-bottom:1px solid #569efe;
		font-size: 18px;
		color: #569efe;
	}
    .list-title{
		margin:12px 0;
		padding: 12px;
		background: #f2f2f2;
		font-size: 13px;
		border-radius: 6px;
		color: #cccccc;
	}
	.item{
		line-height: 1.5;
	}
	.title-activity{
		color: #7b6666;
	}
	.content{
		width: 100%;
		display: flex;
		border: 1px solid #e4e4e4;
	}
    .grid-content{
        padding: 0 10px;
    }
	.page-pagination{
		text-align: center;
		margin-top: 20px auto;
	}
	.content-left{
		width: 280px;
		height:500px;
		overflow: auto;
		background: #f2f2f2;
	}
	.item-row{
		padding: 13px 0;
		color: #999;
		border-bottom: 1px solid #e4e4e4;
		font-size: 15px;
	}
	.white{
		background: #fff;
	}
	.content-right{
		flex:1;
		padding-left: 20px;
	}
</style>

